import React, { Component, useState } from 'react'
import { View, Button,Image, Text } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import MySearch from '../../components/search/index.js'
import MyBorad from '../../components/broadList'
import Mytabbar from '../../components/tabbar'
import {IMG_URL} from '@/commons/constant'
import searchIcon from '@/assets/commons/search-broad.png'
import './index.scss'

@inject('store')
@observer
class Broad extends Component {
  state = {
    searchStyle: {
      bgcolor: '#a9a9cd',
      color: '#cacef1',
      imgIcon: searchIcon
    },
    placeholder: '男装',
    broadid: undefined,
    broadStyle: {
      color: '#fff',
      imgbgcolor: '#8484b6'
    },
    tabList: [
      {
        id: 1,
        cate: '',
        cate_zh: '热门'
      },
      {
        id: 2,
        cate: 'follow',
        cate_zh: '关注'
      },
      {
        id: 3,
        cate: 'wear',
        cate_zh: '穿搭'
      },
      {
        id: 4,
        cate: 'makeup',
        cate_zh: '美妆'
      }
    ],
    tabStyle: {
      color: '#e2e2ee',
      fontSize: "30rpx",
      bgcolor: '#9d9cc8',
      border: '1rpx solid #fff'
    },
    fixed: false,
    page: 'broad',
    search: {
      title: '',
      cate: ''
    }
   
  }
  componentWillMount () {
    const {liveStore} = this.props.store
    liveStore.getLiveList(this.state.search)
  }
  componentDidUpdate() {
    const {liveStore} = this.props.store
    liveStore.getLiveList(this.state.search)
  }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () {
    this.setState({page: 'index'})
   }
  onPageScroll (e) {
    // console.log(e);
    e.scrollTop >= 132 ? this.setState({fixed: true}) : this.setState({fixed: false})
  }
  // onReachBottom() {
  //   const {loading, search} = this.state
  //   const newSearch = {...search}
  //   newSearch.page++
  //   console.log(search);
  //   setTimeout(() => {
  //     goodsStore.loaded && this.setState({loading: false})
  //     this.setState({search: newSearch})
  //   }, 1000);
  // }

  render () {
    const {liveStore} = this.props.store
    const {
      searchStyle, 
      placeholder, 
      tabList,
      tabStyle,
      search,
      fixed,
      page
    } = this.state

    const changeSearch = (type, val) =>{
      const newSearch = {...search}
      newSearch[type] = val
      type === 'cate' && (newSearch.title = '')
      this.setState({
        search: newSearch
      })
    }
    const BroadCon = () => (
      liveStore.list.map(item => (
        <View className="broad-item" key={item.id}>
          <Image className="left-img" src={IMG_URL + item.bigImg}/>
          <View className="cont">
            <View>
              <Text className={['title',!item.petImg && 'title1']}>{item.title}</Text>
              {item.petImg && <Image className={item.petImg && 'pet'} src={IMG_URL + item.petImg}></Image>} 
            </View>
            <Text className="name">{item.name}</Text>
            <View className="broadList">
              <Image className="last-img" src={IMG_URL + item.lastImg1}/>
              <Image className="last-img" src={IMG_URL + item.lastImg2}/>
              <Image className="last-img" src={IMG_URL + item.lastImg3}/>
              <View className="last-title"><View>{item.num}</View>直播购</View>
            </View>
          </View>
        </View>
      ))
    )

    return (
      <View className="broad container">
        <MySearch 
          searchStyle={searchStyle} 
          placeholder={placeholder}  
          onChange={changeSearch} />
        <MyBorad />
        <Mytabbar 
          list={tabList} 
          style={tabStyle} 
          value={search.cate} 
          fixed={fixed}
          page={page}
          onChange={changeSearch} />
        <View className="broad-content">
          {BroadCon()}
        </View>
      </View>  
    )
  }
}

export default Broad
